@import '../../../scss/settings/variables';

$color-comment-separator: theme('colors.grey.100');

$color-box-background: $color-white;
$color-box-border: $color-grey-3;
$color-box-border-focused: $color-grey-2;
$color-box-text: $color-black;
$color-textarea-background: theme('colors.grey.50');
$color-textarea-border: $color-input-border;
$color-textarea-placeholder-text: $color-grey-2;
$box-border-radius: 5px;
$box-padding: 10px;

@mixin focus-outline {
  outline: $color-focus-outline solid 3px;
}

@mixin box {
  background-color: $color-box-background;
  border: 1px solid $color-box-border;
  padding: $box-padding;
  font-size: 11px;
  border-radius: $box-border-radius;
  color: $color-box-text;

  &--focused {
    box-shadow: 3px 2px 3px -1px theme('colors.black-10');
  }

  textarea {
    font-family: $font-sans;
    margin: 0;
    padding: 10px;
    width: 100%;
    background-color: $color-textarea-background;
    border: 1px solid $color-textarea-border;
    box-sizing: border-box;
    border-radius: 5px;
    color: $color-box-text;

    &::placeholder {
      color: $color-textarea-placeholder-text;
      opacity: 1;
    }
  }

  *:focus {
    @include focus-outline;
  }

  &__notice-placeholder {
    position: relative;
    padding-bottom: 40px;
  }

  &__notice {
    background-color: theme('colors.warning.50');
    position: absolute;
    inset-inline-start: -$box-padding;
    bottom: 0;
    width: calc(100% + #{$box-padding} * 2);
    padding: 5px 10px;
    box-sizing: border-box;

    svg.icon {
      color: theme('colors.warning.100');
      width: 14px;
      height: 14px;
      margin-inline-end: 10px;
      vertical-align: text-bottom;
    }
  }

  > :last-child &__notice {
    bottom: -$box-padding;
    // Remove once we drop support for Safari 14.
    // stylelint-disable-next-line property-disallowed-list
    border-bottom-left-radius: $box-border-radius;
    border-end-start-radius: $box-border-radius;
    // Remove once we drop support for Safari 14.
    // stylelint-disable-next-line property-disallowed-list
    border-bottom-right-radius: $box-border-radius;
    border-end-end-radius: $box-border-radius;
  }
}

@mixin button {
  background-color: inherit;
  border: 1px solid $color-grey-3;
  border-radius: 3px;
  color: $color-teal;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  height: 25px;
  padding-inline-start: 5px;
  padding-inline-end: 5px;

  &--primary {
    color: $color-white;
    border: 1px solid $color-teal;
    background-color: $color-teal;
  }

  &--red {
    color: $color-white;
    border: 1px solid theme('colors.critical.200');
    background-color: theme('colors.critical.200');
  }

  &:disabled {
    opacity: 0.3;
  }

  // Disable Firefox's focus styling because we add our own.
  &::-moz-focus-inner {
    border: 0;
  }
}

.comments-list {
  width: 400px;
  position: absolute;
  top: 30px;
  inset-inline-end: 30px;
  z-index: 95;
  font-family: $font-sans;
  pointer-events: none;
}

// stylelint-disable no-invalid-position-at-import-rule
@import 'components/CommentHeader/style';
@import 'components/Comment/style';
@import 'components/CommentReply/style';
